<template>
    <div style="margin: 10px;">
        <div>
            <h2 style="margin-top: 10%;text-align: center;margin-bottom: 1rem;">考生信息</h2>
            <br>
            <div style="text-align: center;color: red;" v-show="nameShow">请输入姓名和密码</div>
            <el-input type="number" v-show="mobileShow" v-model="mobile" placeholder="请输入手机号"></el-input>
            <el-input type="text" v-show="nameShow" v-model="name" placeholder="请输入姓名"></el-input>
            <el-input type="text" v-show="pwdShow" v-model="pwd" placeholder="密码"></el-input>
            <el-button type="primary" @click="regMobile" v-show="mobileShow">确定</el-button>
            <el-button type="primary" v-show="nameShow" @click="login">进入考试</el-button>
            <el-button type="primary" v-show="!mobileShow&&!nameShow" @click="login2">登入考试</el-button>
        </div>
    </div>
</template>

<script>
    import md5 from 'md5'
    export default {
        name: "examLogin",
        data(){
            return{
                mobile: '',
                name: '',
                pwd: '',

                mobileShow: true,
                nameShow: false,
                pwdShow: false,
            }
        },
        methods: {
            loadopen() {
                this.loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.2)'
                });
                setTimeout(() => {this.loading.close();}, 5000);
            },
            loadclose() {
                this.loading.close();
            },
            // 检查手机号
            regMobile(){
                if(!/^1\d{10}$/.test(this.mobile)) {
                    this.$message.error('手机号可能有误');
                    return;
                }
                this.loadopen();
                this.config.post('/user/login/findUserByMobile', {
                    mobile: this.mobile
                }).then(res => {
                    this.loadclose();
                    if (res.data.code === '1') {
                        this.$message.success(res.data.message);
                        this.mobileShow = false;
                        this.nameShow = true;
                        this.pwdShow = true;
                    }else if(res.data.code === '0'){
                        this.$message.success(res.data.message);
                        this.mobileShow = false;
                        this.nameShow = false;
                        this.pwdShow = true;
                    }else {
                        this.$message.error(res.data.message);
                    }
                });
            },
            // 注册
            login(){
                if(!this.name) return;
                if(!this.pwd) return;
                this.loadopen();
                this.config.postLogin('/user/login/register', {
                    'user.user_name': this.name,
                    'user.mobile': this.mobile,
                    'user.password': md5(this.pwd),
                    'user.head_url': '',
                }).then(res => {
                    this.loadclose();
                    if (res.data.code === '0') {
                        this.$message.success(res.data.message);
                        // this.$router.push('/exam');
                        this.login2();
                    }else {
                        this.$message.error(res.data.message);
                    }
                    this.$emit('done', '');
                });
            },
            // 非首次登录
            login2(){
                if(!this.pwd) return;
                this.loadopen();
                this.config.postLogin('/user/login', {
                    mobile: this.mobile,
                    pwd: md5(this.pwd),
                }).then(res => {
                    this.loadclose();
                    if (res.data.code === '0') {
                        // this.$message.success('请开始答题');
                        this.$router.push({path: '/examHome', query: {}});
                        // this.paperList = true;
                        // this.getPaperList();
                        sessionStorage.setItem('loginToken', res.data.token)
                    }else {
                        this.$message.error(res.data.message);
                    }
                    this.$emit('done', '');
                });
            },

        },
        mounted(){
            this.questionBankId = this.config.GetRequest().id;
            // this.config.getOut()
        }
    }
</script>

<style scoped>
    .el-input{
        margin-bottom: 1rem;
    }
    .el-button{
        margin: 1rem 0;width: 100%;
        font-size: 1rem;
        height: 38px;
    }
</style>
